// scss-lint:disable DuplicateProperty, MergeableSelector, QualifyingElement

// Resets
//
// Global resets to common HTML elements.
// Doesn't depend on any third party libraries.
// Inspired by Normalise.css and bootstrap/_reboot.scss


//
// `html` and `body`
//

// Reset the box-sizing
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  // `rem` based on the `font-size` of html
  font-size: $rem-base;
  // Changes the default tap highlight in iOS.
  -webkit-tap-highlight-color: $color-background-active;
  // Prevent adjustments of font size after orientation changes in IE and iOS.
  text-size-adjust: 100%;
}

body {
  background-color: $color-background-body;
  color: $color-text-body;
  font-family: $font-family;
  font-size: $font-size;
  line-height: $line-height;
  margin: 0;
}


//
// Typography
//

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: $width-gap-double 0 0;
}

p,
blockquote,
table,
hr,
dl,
ul,
ol,
pre,
address,
figure {
  margin: $width-gap 0 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: $font-weight-bold;
}

h1 { font-size: $font-size-h1; }
h2 { font-size: $font-size-h2; }
h3 { font-size: $font-size-h3; }
h4 { font-size: $font-size-h4; }
h5 { font-size: $font-size-h5; }
h6 { font-size: $font-size-h6; }

a {
  color: $color-text-link;
  text-decoration: none;
  // Remove gaps in links underline in iOS 8+ and Safari 8+.
  -webkit-text-decoration-skip: objects;

  &:active,
  &:hover {
    text-decoration: underline;
  }
}

b,
strong,
dt {
  font-weight: $font-weight-bold;
}

code {
  background-color: $color-background-code;
  font-family: $font-family-monospace;
  font-size: $font-size-code;
  padding: $padding-code;
}

pre {
  // Mobile device has a small height, so we need to enable scroll-view
  @include scroll-view();

  background-color: $color-background-pre;
  font-size: $font-size-pre;
  line-height: $line-height-pre;
  // Mobile device has a small height, so we need to set the width of pre to the device width
  margin-left: -$width-gap;
  margin-right: -$width-gap;
  padding: $width-gap;

  // Override the code styles
  code {
    background-color: transparent;
    padding: 0;
  }

  @media (min-width: $max-width-container) {
    margin-left: 0;
    margin-right: 0;
  }
}

blockquote {
  border-left: $border-left-blockquote;
  color: $color-text-blockquote;
  padding-left: $width-gap;
}

ul,
ol {
  padding-left: $width-gap-double;
}

dt,
dd,
ol ol,
ul ul,
ol ul,
ul ol {
  margin: 0;
}

hr {
  border: 0;
  border-top: $border-top-hr;
}

small {
  font-size: $font-size-small;
}

// Prevent `sub` and `sup` elements from affecting the line height in all browsers.
sub,
sup {
  font-size: $font-size-sub-sup;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

address {
  color: $color-text-muted;
  font-size: $font-size-address;
  font-style: normal;
}

mark {
  background-color: $color-background-mark;
  color: $color-text;
}


//
// Embedded Content
//

// Add the correct display in iOS 4-7.
audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  max-width: 100%;
  vertical-align: middle;
}


//
// Forms
//

// iOS "clickable elements" fix for role="button"
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
[role="button"] {
  cursor: pointer;
}

// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
  outline: 0;
  touch-action: manipulation;
}

button,
// Prevent a WebKit bug where (*) destroys native `audio` and `video` controls in Android 4.
html [type=button],
[type=reset],
[type=submit],
::-webkit-file-upload-button {
  // (*) Correct the inability to style clickable types in iOS and Safari.
  -webkit-appearance: button;
}

[type=search] {
  // Correct the odd appearance in Chrome and Safari.
  -webkit-appearance: textfield;
}

[type="date"],
[type="time"],
[type="datetime-local"],
[type="month"] {
  // Remove the default appearance of temporal inputs to avoid a Mobile Safari
  // bug where setting a custom line-height prevents text from being vertically
  // centered within the input.
  //
  // Bug report: https://github.com/twbs/bootstrap/issues/11266
  -webkit-appearance: listbox;
}

// Change font properties to `inherit` in Safari.
::-webkit-file-upload-button {
  font: inherit;
}

[hidden] {
  display: none;
}
